import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:provide/provide.dart';

import '../../../common/action/index.dart';
import '../../../common/global/global.dart';
import '../../../http/apis/user.dart';
import '../../../http/models/attentionModel.dart';
import '../../../states/states_model/user.dart';
import '../../../widgets/tipsDialog.dart';

class Follow extends StatefulWidget {
  Follow({Key key}) : super(key: key);

  @override
  _FollowState createState() => _FollowState();
}

class _FollowState extends State<Follow> {
  List<AttentionModel> list = [];

  @override
  void initState() {
    super.initState();
    loadData();
  }

  loadData() {
    UserApis.getAttentionList().then((arr) {
      list.addAll(arr);
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.only(bottom: px(16)),
      child: Builder(
        builder: (context) {
          List<Widget> arr = List.generate(
            list.length,
            (i) => GestureDetector(
              onTap: () {
                final user = Provide.value<UserState>(context);
                final info = user.info;
                final isLogin = info != null;
                if (isLogin) {
                  goPage(
                    context,
                    '/anchorInfo',
                    param: {'token': list[i].memberToken},
                  );
                } else {
                  TipsDialog.login(
                    context,
                    () {
                      goPage(context, '/phoneLogin');
                    },
                  );
                }
              },
              child: Container(
                width: px(343),
                height: px(456),
                margin: EdgeInsets.only(top: px(16)),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(px(16)),
                  child: Stack(
                    children: [
                      SizedBox(
                        width: double.infinity,
                        height: px(600),
                        child: CachedNetworkImage(
                          imageUrl: "${list[i].memberHead}?imageView2/2/w/343",
                          fit: BoxFit.cover,
                          errorWidget: (context, url, error) {
                            return Config.errorNetImage;
                          },
                        ),
                      ),
                      Positioned(
                        top: px(20),
                        left: px(24),
                        child: _Price(list[i]),
                      ),
                      Positioned(
                        top: px(20),
                        right: px(24),
                        child: _OnlineStatus(list[i]),
                      ),
                      Positioned(
                        bottom: px(20),
                        left: px(25),
                        child: _Info(list[i]),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          );
          if (list.length % 2 != 0) {
            arr.add(Container(
              width: px(343),
              height: px(456),
              margin: EdgeInsets.only(top: px(16)),
            ));
          }
          return Wrap(
            alignment: WrapAlignment.spaceEvenly,
            children: arr,
          );
        },
      ),
    );
  }
}

class _OnlineStatus extends StatelessWidget {
  final AttentionModel info;

  const _OnlineStatus(this.info, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: px(48),
      padding: EdgeInsets.symmetric(horizontal: px(18)),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(px(24))),
        color: col("04040f").withOpacity(.4),
      ),
      child: Row(
        children: <Widget>[
          Container(
            width: px(12),
            height: px(12),
            margin: EdgeInsets.only(right: px(8)),
            decoration: BoxDecoration(
              color: CommonAction.checkAnchorStatus(
                info.disturb,
                info.online,
              ).color,
              borderRadius: BorderRadius.circular(px(6)),
            ),
          ),
          Text(
            "${CommonAction.checkAnchorStatus(
              info.disturb,
              info.online,
            ).text}",
            style: TextStyle(
              color: Colors.white,
              fontSize: px(24),
            ),
          ),
        ],
      ),
    );
  }
}

class _Info extends StatelessWidget {
  final AttentionModel info;

  const _Info(this.info, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            info.memberNickname,
            style: TextStyle(
              color: Colors.white,
              fontSize: px(32),
              fontWeight: FontWeight.bold,
              shadows: [
                Shadow(
                  color: Colors.black26,
                  blurRadius: 1,
                  offset: Offset(1, 1),
                ),
              ],
            ),
          ),
          SizedBox(height: px(10)),
          Container(
            width: px(300),
            child: Text(
              info.anchorSign,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                color: Colors.white.withOpacity(.9),
                fontSize: px(24),
                shadows: [
                  Shadow(
                    color: Colors.black26,
                    blurRadius: 1,
                    offset: Offset(1, 1),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class _Price extends StatelessWidget {
  final AttentionModel info;

  const _Price(this.info, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: px(48),
      padding: EdgeInsets.symmetric(horizontal: px(10)),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(px(24))),
        gradient: LinearGradient(
          colors: [
            col("ffda2a"),
            col("f99705"),
          ],
        ),
      ),
      child: Row(
        children: [
          Image.asset(
            "assets/images/icon/star.png",
            width: px(30),
            height: px(30),
          ),
          SizedBox(width: px(5)),
          Text(
            "${info.timePrice}金币/分钟",
            style: TextStyle(
              color: Colors.white,
              fontSize: px(24),
            ),
          ),
        ],
      ),
    );
  }
}
